<!--
 * @Author: zgx 2324461523@qq.com
 * @Date: 2024-01-30 17:33:40
 * @LastEditors: zgx 2324461523@qq.com
 * @LastEditTime: 2024-03-03 22:05:35
 * @FilePath: \tph_shop\src\components\tphSwiper.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 公共轮播图组件 -->
<template>
  <view>
    <swiper
      class="swiper"
      circular
      :indicator-dots="true"
      :style="{height: height}"
      indicator-active-color="#ffffff"
      indicator-color="rgba(255, 255, 255, .3)"
      :autoplay="true"
      :interval="3000"
      :duration="250"
    >
      <swiper-item v-for="item in homeBannerList" :key="item.id">
        <navigator :url="item.hrefUrl" style="width: 100%; height: 100%">
          <image :src="item.imgUrl" mode="scaleToFill" style="width: 100%; height: 100%" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
import type { bannerInfoType } from '@/types/home'
defineProps<{
  homeBannerList: bannerInfoType[]
  height: string
}>()
</script>

<style lang="scss">
@import './style/tphSwiper.scss'
</style>
